/**
 * Created by python on 18-11-9.
 */
let app = new Vue({
    el:"#app",
    data:{
        // 页面中需要使用到的数据，键值对
        host:'http://127.0.0.1:8000/headline/',
        username: sessionStorage.username || localStorage.username,
        user_id: sessionStorage.user_id || localStorage.user_id,
        token: sessionStorage.token || localStorage.token,
        categories:[], //新闻专栏
        news:[], //新闻列表
        page:1, //当前页数
        page_size: 6, // 每页数量
        count: 0,  // 总数量
        cid:1 // 默认专栏
    },
    computed:{
        // 需要通过计算得到的数据，键值对 ，键是名称，值是匿名函数
    },
    mounted:function () {
        // 一加载就需要做的，直接是代码
        this.get_category();
        this.get_news_list();
    },
    methods:{
        // 需要用到的函数，键值对 ，键是名称，值是匿名函数
        // 请求专栏数据
        get_category: function () {
            // http://127.0.0.1:8000/headline/categories/
            axios.get(this.host+'categories/')
                .then(response =>{
                    this.categories = response.data
                })
                .catch(error =>{
                    console.log(error.response.data);
                })
        },
        get_news_list: function () {
            // http://127.0.0.1:8000/headline/categories/1/newslist/?page=1&page_size=6
            axios.get(this.host+'categories/'+this.cid+'/newslist/', {
                    params: {
                        page: this.page,
                        page_size: this.page_size,
                        // ordering: this.ordering
                    },
                    // responseType: 'json'
                })
                .then(response =>{
                    this.count = response.data.count;
                    this.news = response.data.results;
                    this.news[0]['isActive'] = true
                })
                .catch(error =>{
                    console.log(error.response.data)
                })
        },
        // 点击更新分类 点击分类显示高亮状态
        activeFun: function(value){
                this.categories.forEach(function(obj){
                    obj.isActive = false;
                });
                value.isActive = !value.isActive;
                this.cid = value.id;
                this.get_news_list();
        },
          // 退出
        logout: function(){
            sessionStorage.clear();
            localStorage.clear();
            location.href = '/headline-login.html';
        },

    },
    // 1 字符串类型日期 转 日期类型日期 str2date
    // 2 日期 -获取年月日  date2ymmd
    // 3 日期 - 获取十分秒 date2hms
    // 4 日期 - 星期 周  date2w
    // 显示 年月日 时分
    filters:{
        str2date:function (value) {
            return new Date(value)
        },
        date2ymd:function (value) {
            return value.getFullYear() + "年" + (value.getMonth()+1) + "月" + value.getDate() + "日"
        },
        date2hms:function (value) {
            return value.getHours() + ":" +value.getMinutes()
        }
    },

})